<%@page import="java.util.List"%>
<%@page import="ma.co.ba.BusinessApplications.model.Activite"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	List<Activite> mesActivites =( List<Activite> ) request.getAttribute("mesActivites");
%>

<div class="container">
	<div class="row">
		<div id="content" class="col-lg-12">
			<!-- PAGE HEADER-->
			<div class="row">
				<div class="col-sm-12">
					<div class="page-header">
						<!-- STYLER -->
						<!-- /STYLER -->
						<!-- BREADCRUMBS -->
						<ul class="breadcrumb">
							<li><i class="fa fa-home"></i> <a href="<c:url value="/" />">Home</a>
							</li>
							<li>Fiches de temps</li>
						</ul>
						<!-- /BREADCRUMBS -->
						<div class="clearfix">
							<h3 class="content-title pull-left">Fiches de temps</h3>
						</div>
					</div>
				</div>
			</div>
			<!-- /PAGE HEADER -->


			<div class="row">
				<div class="col-md-12">
					<!--  CONTENU DE LA PAGE -->

					<!-- CALENDAR -->
					<div class="row">
						<div class="col-md-12">
							<!-- BOX -->








							<div class="row">
								<div class="col-md-1"></div>
								<div class="col-md-9">
									<div id='calendar'></div>
								</div>
							</div>



							<!-- /BOX -->
						</div>
					</div>
					<!-- /CALENDAR -->


					<div class="footer-tools">
						<span class="go-top"> <i class="fa fa-chevron-up"></i> Top
						</span>
					</div>



					<!--  This is a blank page -->
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	/*-----------------------------------------------------------------------------------*/
	/*	Fullcalendar
	 /*-----------------------------------------------------------------------------------*/
	var handleCalendar = function() {
		/* initialize the external events
		-----------------------------------------------------------------*/

		var initDrag = function(el) {

			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
			// it doesn't need to have a start or end
			var eventObject = {
				title : $.trim(el.text())
			// use the element's text as the event title
			};

			// store the Event Object in the DOM element so we can get to it later
			el.data('eventObject', eventObject);

			// make the event draggable using jQuery UI
			el.draggable({
				zIndex : 999,
				revert : true, // will cause the event to go back to its
				revertDuration : 0
			//  original position after the drag
			});

		}

		var addEvent = function(title) {
			title = title.length == 0 ? "Untitled Event" : title;
			var html = $('<div class="external-event">' + title + '</div>');
			jQuery('#event-box').append(html);
			initDrag(html);
		}

		$('#external-events div.external-event').each(function() {
			initDrag($(this))
		});

		$('#add-event').unbind('click').click(function() {
			var title = $('#event-title').val();
			addEvent(title);
		});

		/* initialize the calendar
		-----------------------------------------------------------------*/
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		var calendar = $('#calendar').fullCalendar(
				{
					header : {
						left : 'prev,next today',
						center : 'title',
						right : 'month,agendaWeek,agendaDay'
					},
					selectable : false,
					weekNumbers: true,
					selectHelper : true,

					select : function(start, end, allDay) {
						var title = prompt('Event Title:');
						if (title) {
							calendar.fullCalendar('renderEvent', {
								title : title,
								start : start,
								end : end,
								allDay : allDay
							}, true // make the event "stick"
							);
						}
						calendar.fullCalendar('unselect');
					},
					editable : true,
					editable : true,
					droppable : true, // this allows things to be dropped onto the calendar !!!
					drop : function(date, allDay) { // this function is called when something is dropped

						// retrieve the dropped element's stored Event Object
						var originalEventObject = $(this).data('eventObject');

						// we need to copy it, so that multiple events don't have a reference to the same object
						var copiedEventObject = $.extend({},
								originalEventObject);

						// assign it the date that was reported
						copiedEventObject.start = date;
						copiedEventObject.allDay = allDay;

						// render the event on the calendar
						// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
						$('#calendar').fullCalendar('renderEvent',
								copiedEventObject, true);

						// is the "remove after drop" checkbox checked?
						if ($('#drop-remove').is(':checked')) {
							// if so, remove the element from the "Draggable Events" list
							$(this).remove();
						}

					},
					<%if (mesActivites != null) {%>
					events : [ 
			           
<%for (Activite a : mesActivites) {%>
					           {
					        	 
title: '<%=a.getTitre()%><sec:authorize ifAnyGranted="Directeur"> : <%=a.getConsultant().getNomComplet() %></sec:authorize>',
id:'<%=a.getId()%>',
valid:'<%=a.isValide()%>',
start: new Date("<%=a.getDateDebut()%>"),
end : new Date("<%=a.getDateFin()%>"),
url : '<c:url value="/activites/show?id="/><%=a.getId()%>',
<%if(a.isValide()){%>
backgroundColor: Theme.colors.green
	<%}
else {%>
backgroundColor: Theme.colors.red
<%}%>
					           },
		<%}%>       	   
]
					<%}%>
				});

	}
</script>
